<template>
  <main-wrap>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="wrapper">
      <div class="msgListWrap">
        <div class="weui-panel weui-panel_access mycard">
          <div class="weui-panel__bd">
            <stat-card :ostat="ostat" :stattext="order_detail.isReceiptStr" :otime="order_detail.createTime" :onum="order_detail.number" v-if="statcardok"></stat-card>
          </div>
          <div class="weui-panel__ft">
            <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
              <router-link to="/reportdetail" class="weui-cell__bd blue">查看更多</router-link>
              <span class="weui-cell__ft"></span>
            </a>
          </div>
        </div>

        <div class="weui-panel weui-panel_access mtp4 mycard">
          <div class="weui-panel__bd">
            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg btnone">
              <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title gray">{{order_detail.repairUserObj ? order_detail.repairUserObj.name : ''}}</h4>
                <a :href="'tel:' + (order_detail.repairUserObj ? order_detail.repairUserObj.mobile : '')" class="phoneWrap">{{order_detail.repairUserObj ? order_detail.repairUserObj.mobile : ''}} <span class="iconfont">&#xe792;</span></a>
                <p class="weui-media-box__desc fullL" v-if="ostat === '0' || ostat === '10'">
                  <span class="partS mrp24">等待师傅选择时间</span>
                  <time-counter class="partB" :timer="counttime" :tagpos="'right'"></time-counter>
                </p>
              </div>
              <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" :src="shifutxsrc" alt="">
              </div>
            </a>
          </div>
        </div>

        <div class="weui-panel weui-panel_access mtp4 mycard" v-if="ostat !== '0' && ostat !== '10' && appointtimestr !== ''">
          <div class="weui-panel__bd">
            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg btnone">
              <div class="weui-media-box__bd">
                <p class="weui-media-box__desc fullL"><span class="partB">预约上门时间</span><span class="ordertime partS">{{order_detail.acceptRepairTime}}</span></p>
                <h4 class="weui-media-box__title">{{appointtimestr}}</h4>
              </div>
            </a>
          </div>
        </div>

        <!-- 用戶评价 -->
        <od-opinion class="mtp4" v-if="ostat === '50' && order_detail.userEvaluate && order_detail.userEvaluate.desc"></od-opinion>
      </div>

      <div class="paddingP3 mtp4">
        <a href="javascript:;" class="weui-btn weui-btn_warn" @click="cancelOrder" v-if="ostat === '0' || ostat === '10' || ostat === '11'">撤销</a>
        <router-link to="/opinion" class="weui-btn weui-btn_primary" v-if="(ostat === '40' || ostat === '31') && (!order_detail.userEvaluate || !order_detail.userEvaluate.desc)">验收并评价</router-link>
      </div>
    </van-pull-refresh>

    <my-confirm ref="myconfirm" confirmButtonText="撤销" confirmType="warn" title="撤销服务" message="撤销后，您将无法继续本次服务" descri="此操作不可逆" @myes="goCancelOrder"></my-confirm>
  </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
import StatCard from '@/components/statcard'
import OdOpinion from '@/components/odOpinion'
import MyConfirm from '@/components/myconfirm'
import TimeCounter from '@/components/timecounter'

import { mapState, mapActions } from 'vuex'
export default {
  name: 'OrderDetail',
  data () {
    return {
      refreshing: false,
      statcardok: false, // 刷新状态块所用
      ostat: localStorage.ostat ? localStorage.ostat : '0',

      // shifutxsrc: require('imgs/头像.png'),
      // shifutxsrcset: this.cm.srcsetstr(require('imgs/头像@2x.png'), require('imgs/头像@3x.png')),

      allowtime: this.cm.appointOvertime, // 30分钟内预约时间
      counttime: Math.round((new Date()).getTime() / 1000),
      appointtimestr: '',

      shifutxsrc: ''
    }
  },
  computed: {
    ...mapState(['order_detail'])
  },
  components: {
    MainWrap,
    StatCard,
    OdOpinion,
    MyConfirm,
    TimeCounter
  },
  watch: {
    order_detail () {
      this.statcardok = false
      localStorage.ostat = this.order_detail.isReceipt
      this.ostat = this.order_detail.isReceipt
      this.counttime = this.allowtime + Math.round(Date.parse(this.order_detail.createTime.replace(/-/g, '/')) / 1000)

      setTimeout(() => {
        this.statcardok = true
      }, 400)

      if (this.order_detail.repairDate) {
        let appointdate = new Date(this.order_detail.repairDate.replace(/-/g, '/'))
        this.appointtimestr = (appointdate.getMonth() + 1) + '月' + appointdate.getDate() + '日（周' + this.cm.getweekstr(appointdate.getDay()) + '）' + this.order_detail.repairBeginTime.slice(0, 5) + '-' + this.order_detail.repairEndTime.slice(0, 5)
      }

      this.shifutxsrc = this.cm.getAvatar(this.order_detail.repairUserObj.avatarUrl)

      this.$toast.clear()
      this.refreshing = false
    }
  },
  created () {
    this.$toast.loading({
      duration: 0,
      message: '数据获取中...'
    })
    if (this.$route.params.oid) localStorage.oid = this.$route.params.oid
    this.getOrderDetail()
  },
  mounted () {
    this.cm.overscroll(document.querySelector('.wrapper'))
  },
  methods: {
    ...mapActions(['getOrderDetail']),
    cancelOrder () {
      this.$refs.myconfirm.show()
    },
    goCancelOrder () {
      this.$toast.loading({
        duration: 0,
        message: '请稍等...'
      })

      this.cm.myajax('/sys/userrepair/cancelRepair', {repairId: localStorage.oid}, (data) => {
        // this.$toast.clear()

        this.getOrderDetail()
      })
    },
    onRefresh () {
      this.getOrderDetail()
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper
  height calc(100vh)
  overflow auto
.weui-media-box__desc
  line-height 1.8em
.phoneWrap
  font-size 24px
  font-family PingFangSC-Medium
  line-height 1.4em
  color #2d3034
  display flex
  .iconfont
    font-size 20px
    color #576b95
    margin-left .5em
</style>
